<template>
  <div class="search-page">
    <!--头部-->
    <div class="search-header">
      <!--返回按钮-->
      <div class="back-button" @click="goBack">
          <svg t="1751614585251" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" 
              p-id="1471" width="20" height="20">
              <path d="M790.865959 73.216062 322.123178 512.062492l468.74278 438.746442c16.397998 16.697962 16.397998 43.894642 0 60.592603-16.397998 16.697962-42.894764 16.697962-59.292762 0l-498.839107-466.943c-8.698938-8.898914-12.398487-20.797461-11.898548-32.496033-0.599927-11.698572 3.099622-23.497132 11.898548-32.496033l498.839107-466.943c16.397998-16.697962 42.894764-16.697962 59.292762 0C807.263957 29.421409 807.263957 56.518101 790.865959 73.216062z" 
                  fill="#272636" 
                  p-id="1472">
              </path>
          </svg>
      </div>

      <!--输入框-->
      <div class="search-input-container">
        <input 
          type="text" 
          class="search-input" 
          placeholder="搜索你感兴趣的内容..."
          v-model="searchQuery"
          @keyup.enter="performSearch"
          ref="searchInputRef"
        >
        <div class="search-icon" @click="performSearch">🔍</div>
      </div>
    </div>

    <!--展示主体-->
    <div class="search-content">
      <!--搜索历史-->
      <div class="search-history" v-if="!searchQuery && searchHistory.length > 0">
        <div class="section-header">
          <div class="section-title">搜索历史</div>
          <div class="clear-history" @click="clearHistory">清除</div>
        </div>
        <div class="history-list">
          <div class="history-item" v-for="(item, index) in searchHistory" :key="index" @click="useHistoryItem(item)">
            <div class="history-text">{{ item }}</div>
            <div class="delete-history" @click.stop="removeHistoryItem(index)">×</div>
          </div>
        </div>
      </div>

      <!--热门搜索-->
      <div class="hot-searches" v-if="!searchQuery">
        <div class="section-header">
          <div class="section-title">热门搜索</div>
        </div>
        <div class="hot-list">
          <div class="hot-item" v-for="(item, index) in hotSearches" :key="index" @click="useHistoryItem(item)">
            <div class="hot-rank">{{ index + 1 }}</div>
            <div class="hot-text">{{ item }}</div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const searchQuery = ref('')
const searchInputRef = ref(null)
const searchHistory = ref([])

// 模拟热门搜索数据
const hotSearches = ref([
  '秋日穿搭',
  '网红美食',
  '旅行攻略',
  '居家生活',
  '健身打卡',
  '美妆教程',
  '摄影技巧',
  '手工DIY',
  '读书分享',
  '电影推荐'
])

// 返回上一页
const goBack = () => {
  router.back()
}

// 执行搜索
const performSearch = () => {
  if (!searchQuery.value.trim()) return
  
  // 将搜索词添加到历史记录
  addToHistory(searchQuery.value)
  
  // 跳转到搜索结果页面，使用replace模式避免重复历史
  router.replace({
    path: '/SearchResults',
    query: { q: searchQuery.value }
  })
}

// 添加到搜索历史
const addToHistory = (query) => {
  // 去重：如果已存在，先移除旧的
  const index = searchHistory.value.indexOf(query)
  if (index !== -1) {
    searchHistory.value.splice(index, 1)
  }
  
  // 添加到历史记录开头
  searchHistory.value.unshift(query)
  
  // 限制历史记录数量
  if (searchHistory.value.length > 10) {
    searchHistory.value.pop()
  }
  
  // 保存到本地存储
  localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value))
}

// 使用历史记录项
const useHistoryItem = (item) => {
  searchQuery.value = item
  performSearch()
}

// 删除单个历史记录
const removeHistoryItem = (index) => {
  searchHistory.value.splice(index, 1)
  localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value))
}

// 清除所有历史记录
const clearHistory = () => {
  searchHistory.value = []
  localStorage.removeItem('searchHistory')
}

onMounted(() => {
  // 从本地存储加载搜索历史
  const savedHistory = localStorage.getItem('searchHistory')
  if (savedHistory) {
    searchHistory.value = JSON.parse(savedHistory)
  }
  
  // 从URL参数获取搜索词
  const queryParam = route.query.q
  if (queryParam) {
    searchQuery.value = Array.isArray(queryParam) ? queryParam[0] : queryParam
  }
  
  // 自动聚焦搜索框
  nextTick(() => {
    searchInputRef.value.focus()
  })
})
</script>

<style lang="scss" scoped>
.search-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;
}

.search-header {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 10;
}

.back-button {
  font-size: 24px;
  margin-right: 10px;
  cursor: pointer;
  display: flex;
  align-items: center
}

.search-input-container {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20px;
  padding: 0 15px;
  height: 40px;
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
}

.search-icon {
  cursor: pointer;
  font-size: 16px;
}

.search-content {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
}

.clear-history {
  color: #999;
  font-size: 14px;
  cursor: pointer;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.history-text {
  flex: 1;
  font-size: 14px;
}

.delete-history {
  color: #999;
  font-size: 16px;
  padding: 0 5px;
  cursor: pointer;
}

.hot-searches {
  margin-top: 20px;
}

.hot-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hot-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.hot-rank {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 12px;
  font-weight: bold;
}

.hot-item:nth-child(-n+3) .hot-rank {
  background-color: #ff6b6b;
  color: white;
}

.hot-text {
  flex: 1;
  font-size: 14px;
}
</style>